import React, { Component } from 'react';
import { InputNumber, Button } from 'antd';

import { createAsyncAddAction } from './actions/count';
import Store from './store';

export default class ReduxDemo extends Component {
  state = {
    value1: 0,
    value2: 0,
  }

  componentDidMount() {
    Store.subscribe(() => {
      this.forceUpdate();
    });
  }

  add = () => {
    const { value1, value2 } = this.state;
    Store.dispatch(createAsyncAddAction({ value1, value2 }));
  }


  render() {
    const { value1, value2 } = this.state;
    const total = Store.getState();

    return (
      <div>
        <h2>加法</h2>
        <InputNumber value={value1} onChange={ val => this.setState({ value1: val }) } /> +
        <InputNumber value={value2} onChange={ val => this.setState({ value2: val }) } />
        <Button type="link" onClick={this.add}>=</Button>
        {total}
      </div>
    )
  }
}
